<template>
 <div>
   <el-container>
      <el-aside
        width="200px"
      >
        <div class="el-form-item__label title_label">选择控件</div>
        <div class="flex">
            <div v-for="item in list" class="listItem" draggable='true'  @dragstart="dragstart($event,item.type)">
                <i :class="item.class" style="color:#409EFF "></i>
                <label class="el-form-item__label">{{item.name}}</label>
            </div>
        </div>
      </el-aside>
      <el-main style="padding:0px;
      border:#E4E7ED 1px solid;
      padding:10px;
      margin-left:20px;
      margin-right:20px;
      width: 100%">
        <div >
          <div class="el-form-item__label title_label">{{row.name}}</div>
          <div style="display: flex;flex-direction: row;justify-content: right">
            <el-button  @click="cancle" size="mini" style="width: 80px">返回</el-button>
            <el-button type="primary" @click="previewForm" size="mini" style="width: 80px">预览</el-button>
            <el-button type="primary" @click="submitFormConfig" size="mini" style="width: 80px">提交</el-button>
          </div>
          <el-divider></el-divider>
        </div>
        <div @drop="drop($event)" @dragover="dragover($event)" style="width:900px;height:638px;overflow-y: auto">
              <el-form>
                <draggable v-model="LayoutJSON" @update="fileDragEnd">
                    <transition-group>
                      <div :span="24" v-for="(item,index) in LayoutJSON" :key="index" style="cursor: move;width: 98%">
                            <el-form-item v-if="item.option[1].value=='1'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <br>
                                    <el-input :disabled='false' :placeholder="item.option[3].value"></el-input>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='2'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <el-select style="width:100%" :disabled='false' :placeholder="item.option[3].value">
                                      <el-option v-for="item_ in item.option[3].options"
                                                 :key="item_.value"
                                                 :label="item_.label"
                                                 :value="item_.value"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='3'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <el-time-picker style="width:100%" :disabled='false'></el-time-picker>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='4'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <el-date-picker style="width:100%" :disabled='false'></el-date-picker>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='5'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <el-input style="width:100%" :disabled='false' type="textarea" :placeholder="item.option[3].value"></el-input>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='6'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                    <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                    <el-input-number style="width:100%" :disabled='false'></el-input-number>
                                </div>
                            </el-form-item>
                             <el-form-item v-else-if="item.option[1].value=='7'">
                                <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                   <span style="float:left" class="el-form-item__label">{{item.option[0].value}}</span>
                                   <div
                                    style="width:100%"

                               class="upload-demo"
                               :disabled='false'>
                               <i class="el-icon-upload" style="color:gray"></i>
                               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                               <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                      </div>
        </div></el-form-item>
                            <el-form-item v-else-if="item.option[1].value=='8'">
                              <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                <el-radio-group v-model="item.option[3].value" style="width: 100%;" disabled>
                                  <el-radio v-for="_item in item.option[3].options" :label="_item.value" :key="_item.index">{{_item.name}}</el-radio>
                                </el-radio-group>
                              </div>
                            </el-form-item>
                            <el-form-item v-else-if="item.option[1].value=='9'">
                              <div :class="[{'item_box_active': isClicked==index},'item_box']" @click="edit(index)">
                                <span style="float:left" class="el-form-item__label">{{index+1}} {{item.option[0].value}}</span>
                                <br>
                                <el-checkbox-group v-model="item.option[3].value" style="height: 40px;width: 100%;" disabled>
                                  <el-checkbox  v-for="_item in item.option[3].options" :label="_item.value" :key="_item.index">{{_item.name}}</el-checkbox>
                                </el-checkbox-group>
                              </div>
                            </el-form-item>
                      </div>
                    </transition-group>
                </draggable>
              </el-form>
          </div>
      </el-main>
       <el-aside
        width="500px"
        class="aside_card"
      >
        <div class="el-form-item__label title_label">修改控件属性</div>
        <div class="_flex">
            <div v-for="item in editForm" class="listItem_right">
              <span v-if="item.type==1&&item.name=='属性名'" style="color: red">*</span>
              <label class="el-form-item__label" style="font-weight: bold">{{item.name}}</label>
              <div v-if="item.type==1&&item.name!='属性名'">
                  <span></span><el-input v-model="item.value"></el-input>
              </div>
              <div v-else-if="item.type==1&&item.name=='属性名'">
                <span></span>
                <el-select v-model="item.value" style="width:100%" clearable @change="selectAttr">
                  <el-option v-for="item in attrList"
                             :key="item.name"
                             :value="item.name"
                             :label="item.name"
                             :disabled="item.enable=='false'"></el-option>
                </el-select>
              </div>
              <div v-else-if="item.type==2">
                  <span></span>
                  <el-select v-model="item.value" style="width:100%">
                      <el-option v-for="item in selectList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"></el-option>
                  </el-select>
              </div>
<!--              TODO 配置项样式问题-->
              <div v-else-if="item.type==8||item.type==2">
                  <div v-if="item.name!='是否必填'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                    <div>
                      <span style="color: red">*</span>
                      <span class="el-form-item__label" style="min-width: 80px">选项名称</span>
                    </div>
                    <el-input size="mini" style="width: 300px" v-model="option"></el-input>
                    <el-button size="mini" type="primary" @click="addOptions">添加</el-button>
                  </div>
                  <div v-if="item.name!='是否必填'" >
                      <div v-for="_item in item.options"
                           style="display: flex;
                           flex-direction: row;
                           align-items: center;
                           justify-content: space-between;
                           margin: 10px 0">
                        <div class="el-form-item__label">选项{{_item.index+1}}：{{_item.name}}</div>
                        <el-button size="mini" type="danger" @click="removeOptions(_item.index)">删除</el-button>
                      </div>
                  </div>
                  <el-radio-group v-model="item.value" v-if="item.name=='是否必填'">
                    <el-radio v-for="_item in item.options" :label="_item.value">{{_item.name}}</el-radio>
                  </el-radio-group>
              </div>
                <div v-else-if="item.type==9">
                  <span></span>
                  <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                    <div style="min-width: 80px">
                      <span style="color: red">*</span>
                      <span class="el-form-item__label" >选项名称</span>
                    </div>
                    <el-input size="mini" style="width: 300px" v-model="option"></el-input>
                    <el-button size="mini" type="primary" @click="addOptions">添加</el-button>
                  </div>
                  <div>
                    <div v-for="_item in item.options"
                         style="display: flex;
                           flex-direction: row;
                           align-items: center;
                           justify-content: space-between;
                           margin: 10px 0">
                      <div class="el-form-item__label">选项{{_item.index+1}}：{{_item.name}}</div>
                      <el-button size="mini" type="danger" @click="removeOptions(_item.index)">删除</el-button>
                    </div>
                  </div>
                </div>
              </div>

          <div v-if="editForm.length>0">
            <el-button type="danger" size="small" style="width: 100%" @click="removeForm(index)">删除</el-button>
          </div>
        </div>
      </el-aside>
     </el-container>
   <el-dialog  :visible="showDialog" append-to-body title="预览" @close="showDialog=false">
     <formConfig3 :LayoutJSON="LayoutJSON" :editObject="2" ref="formConfig"></formConfig3>
     <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false" size="mini">确 定</el-button>
      </span>
   </el-dialog>
 </div>
</template>
<script>
import draggable from 'vuedraggable'
import TaskManager from "../service/TaskManager";
import formConfig3 from "../components/formConfig3";
export default {
    name:"formConfig2",
    components:{draggable,formConfig3},
    // props:['row'],
    data(){
        return{
           isClicked:"",
           showDialog:false,
           row:this.$route.params.row,
           sort:"",
           index:"",
           option:"",
           type:"",
           radio:"是",
           selectType:"",
           LayoutJSON:[],
           editForm:[],
           dialogFormVisible:false,
           list:[
               {name:"输入框",class:"el-icon-remove",type:"1"},
               {name:"下拉选择框",class:"el-icon-success",type:"2"},
               {name:"时间选择框",class:"el-icon-s-marketing",type:"3"},
               {name:"日期选择器",class:"el-icon-s-data",type:"4"},
               {name:"多行输入框",class:"el-icon-s-unfold",type:"5"},
               {name:"数字输入框",class:"el-icon-s-grid",type:"6"},
               {name:"附件上传",class:"el-icon-circle-plus",type:"7"},
               {name:"单项选择框",class:"el-icon-circle-plus",type:"8"},
               {name:"多项选择框",class:"el-icon-circle-plus",type:"9"},
           ],
           attrList:[],
           attributeList:[
               // {name:"标签名",type:"1"},
               {name:"属性名",type:"1"},
               // {name:"CODE",type:"1"},
               {name:"控件类型",type:"2"},
               {name:"是否必填",type:"8"},
           ],
           attribute:{
               label:"",
               attr:"",
               code:"",
               type:"",
               radio:""
           },
           selectList:[
               {value:"1",label:"输入框"},
               {value:"2",label:"下拉选择框"},
               {value:"3",label:"时间选择框"},
               {value:"4",label:"日期选择框"},
               {value:"5",label:"多行输入框"},
               {value:"6",label:"数字输入框"},
               {value:"7",label:"附件上传"},
               {value:"8",label:"单项选择框"},
               {value:"9",label:"多项选择框"},
           ]
        }
      },
      methods:{
          distinct(){
            let obj={};
            console.log(this.LayoutJSON)
            this.LayoutJSON.forEach(item=>{
              // console.log(item.option[0])
              if(!item.option[0].value){
                return false;
              }
              else {
                let val=item.option[0].value;
                if(obj[val]==undefined){
                  obj[val]=1;
                }else{
                  obj[val]+=1;
                }
              }
            })
            // console.log(obj)
            for(let item in obj) {
              console.log(obj[item])
              if (obj[item] > 1) {
                return false;
              } else {
                return true;
              }
            }
          },
          selectAttr(val){
            console.log(this.LayoutJSON)
            let counter=0;
            this.LayoutJSON.forEach(item=>{
              if(item.option[0].value) {
                if(item.option[0].value==val){
                  counter++;
                  if(counter>1){
                    this.$message({
                      type:"warning",
                      message:"当前属性名已被选择，请更改或删除属性名！"
                    })
                  }
                }
              }else{
                return;
              }
            })
          },
          cancle(){
            this.$confirm('是否返回?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              this.$router.go(-1);
            }).catch(() => {
            });
          },
          submitFormConfig(){
            if(this.LayoutJSON.length!=0){
              if(this.distinct()){
                let params={
                  name:this.row.name,
                  layout:JSON.stringify(this.LayoutJSON)
                }
                TaskManager.saveLayoutJSON(params).then((res)=>{
                  console.log(res)
                  if(res.data=='success'){
                    this.$message({
                      type:"success",
                      message:"保存成功！"
                    })
                  }else{
                    this.$message({
                      type:"error",
                      message:"保存失败！"
                    })
                  }
                })
              }
              else{
                this.$message({
                  type:"warning",
                  message:"有属性名重复选择或者属性名为空，请修改或删除属性名！"
                })
              }
            }
          },
          previewForm(){
            // console.log(JSON.stringify(this.LayoutJSON),JSON.stringify(this.LayoutJSON).length)
            // console.log(this.LayoutJSON)
            this.showDialog=true;
          },
          dragstart(event,type){
              event.dataTransfer.setData("type",type)
              // console.log("drag",type)
          },
          drop(event){
              if(event.dataTransfer.getData("type")!=""){
                let type=event.dataTransfer.getData("type");
                let item={};
                item.label="";
                item.option=[
                    // {name:"标签名",type:"1",value:""},
                    {name:"属性名",type:"1",value:""},
                    {name:"控件类型",type:"2",value:type},
                    // {name:"提示信息",type:"1",value:""},
                    {name:"是否必填",type:"8",value:true,options:[{name:'是',value:true},{name:"否",value:false}]},
                ];
                item.type=type;
                if(type=='8'){
                  item.option.push({name:"选项",type:"8",value: "", options:[]})
                }else if(type=='9'){
                  item.option.push({name:"选项",type:"9",value: [], options:[]})
                }else if(type=='2'){
                  item.option.push({name:"选项",type:"8",value: "", options:[]})
                }
                else if(type=='1'||type=='2'||type==5){
                  item.option.push({name:"提示信息",type:"1",value:""})
                }
                this.LayoutJSON.push(item);
                this.editForm=item.option;
                this.index=this.LayoutJSON.length-1;
                // console.log("drop",this.editForm)
                // console.log(this.LayoutJSON)
              }
          },
          dragover(event){
             event.preventDefault()
          },
          fileDragEnd (evt) {
	          // console.log(evt)
            //evt.item //可以知道拖动的本身
            //evt.to    // 可以知道拖动的目标列表
            //evt.from  // 可以知道之前的列表
            //evt.oldIndex  // 可以知道拖动前的位置
            //evt.newIndex  // 可以知道拖动后的位置
	    },
        addOptions(){
            let index=this.LayoutJSON[this.index].option[3].options.length;
            this.LayoutJSON[this.index].option[3].options.push({name:this.option,value:this.option,index:index})
            this.option="";
        },
        removeOptions(index){
          let data=this.LayoutJSON[this.index].option[3].options
          data.splice(index,1);
            console.log(data)
          for(let i=index;i<data.length;i++){
            data[i].index=data[i].index-1;
          }
          this.LayoutJSON[this.index].option[3].options=data;
          console.log(data)
        },
        removeForm(index){
            console.log(index);
            this.LayoutJSON.splice(index,1);
            this.editForm=[];
        },
        edit(index){
          // console.log(index)
             this.isClicked=index;
             if(index!='-1'){
               this.index=index
               this.editForm=this.LayoutJSON[index].option
             }
        },
        formConfig(index){
            console.log(index)
        },
        load(){
          // console.log("change")
          TaskManager.getDynamicForm({status:'1',name:this.row.name}).then((res)=>{
            console.log(res.data)
            this.attrList=res.data
          })
          TaskManager.getLayoutJSON({name:this.row.name}).then((res)=>{
            if(res.data!='error'&&res.data!=""){
              this.LayoutJSON=res.data;
            }
          })
        }
      },
      mounted() {
        this.load();
      }
}
</script>
<style scoped>
.flex{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
._flex{
    text-align: left;
}
.el-form-item__label{
    text-align: center;
    float: none;
}
/deep/ .el-form-item__content{
  width: 100%;
}
.el-aside{
  height: 816px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
  border-radius:4px;
  padding:10px;
  border:#E4E7ED 1px solid
}
.aside_card{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
  border-radius:4px;
  padding:10px;
  border:#E4E7ED 1px solid
}
.title_label{
  font-size: 16px;
  font-weight:normal;
  color:#000;
  margin-bottom: 10px;
  padding:5px 10px;
  background-color: #f2f6fc;
}
.listItem{
    width: 100%;
    margin: 5px 0;
    border: 1px dashed #409EFF;
    background-color: #f2f6fc;
    padding:2px 10px ;
}
.listItem_right{
  width: 100%;
  margin: 5px 0;
  border-bottom: 1px solid #EBEEF5;
  /*background-color: #f2f6fc;*/
  padding: 10px ;
}
.item_box{
    width: 100%;
    /*margin: 0 10px;*/
    padding: 20px;
    border: 1px solid #e7e7e7;
    border-radius: 2px;
}
.item_box_active{
    border-left-width: 10px;
    border-left: 10px solid #409EFF;
    background-color: #f2f6fc;
}
.el-input{
  width: 100% !important;
}
.el-input .el-input--suffix{
  width: 100% !important;
}
/deep/.el-input.el-input--suffix{
  width: 100% !important;
}
.el-input__inner{
  width: 100% !important;
}
/deep/ .el-form-item__content{
  width: 100% !important;
}
.upload-demo{
    border:1px dashed gray;
    border-radius: 8px;
}
.title{
    font-size:20px;
    font-weight: bold;
    color: #409EFF;
}
</style>
